<template>
  <button @click="onClick" :class="[`size-${size}`, `back-color-${type}`]">
    <!-- icon -->
    <i v-if="icon" :class="['iconfont', `icon-${icon}`]"></i>
    <!-- 文字 -->
    <slot v-else />
  </button>
</template>

<script>
const sizeEnum = ['primary', 'mini', 'large']
const typeEnum = ['theme', 'info', 'success']
</script>

<script setup>
import { defineEmits } from 'vue'

defineProps({
  icon: String,
  size: {
    type: String,
    default: 'primary',
    validator(val) {
      const result = sizeEnum.includes(val)
      if (!result) {
        throw new Error(`您必须指定在${sizeEnum.join('、')}中的一个`)
      }

      return result
    }
  },
  type: {
    type: String,
    default: 'theme',
    validator(val) {
      const result = typeEnum.includes(val)
      if (!result) {
        throw new Error(
          `您必须指定在${typeEnum.join('、')}中的一个，当前type值为:${val}`
        )
      }

      return result
    }
  }
})

const emits = defineEmits(['onButtonClick'])

const onClick = () => {
  emits('onButtonClick')
}
</script>

<style lang="scss" scoped>
button {
  background-color: transparent;
  border-radius: 0.1rem;
  text-align: center;
  color: $light-text-color;
  background-color: $theme-color;
  cursor: pointer;
  border: none;
}
.size-primary {
  width: 0.7rem;
  height: 0.4rem;
  line-height: 0.4rem;
}
.size-mini {
  width: 0.4rem;
  height: 0.4rem;
  line-height: 0.4rem;
}
.size-large {
  width: 100%;
  height: 100%;
  line-height: 0.4rem;
}

.back-color-theme {
  background-color: $theme-color;
  &:hover {
    background-color: $theme-color-fade;
  }
}
.back-color-info {
  background-color: rgb(212, 212, 216);
  &:hover {
    background-color: rgba(212, 212, 216, 0.646);
  }
}
.back-color-success {
  background-color: rgb(61, 248, 14);
}
</style>
